<template>
  <div id="jobComplain">
    <h1 class="con-right-title">
      作业抄袭投诉管理
    </h1>
    <!-- 顶部搜索部分 -->
    <top-search :form-inline="formInline" @toSearch="toSearch"></top-search>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" plain @click="handleAll">
        批量处理
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
      max-height="490"
      ref="table"
    >
      <el-table-column type="selection" width="55" :selectable="selectAble">
      </el-table-column>
      <el-table-column type="index" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="complainNickName"
        label="投诉人昵称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="complainDpAccount"
        label="投诉人大鹏号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="complainTime"
        label="投诉时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="complainPhone"
        label="联系电话"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="投诉理由"
        min-width="130"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span @click="showComplainReason(scope.row)">{{
            scope.row.reason
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.picture && scope.row.picture.length > 0">
            <listImgShow :imgInfo="scope.row.picture"></listImgShow>
          </span>
          <span v-else> - </span>
        </template>
      </el-table-column>
      <el-table-column label="被投诉作业" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showJobDetail(scope.row)">
            点击查看作业
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="respondentDpAccount"
        label="被投诉人大鹏号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="handlerNickName"
        label="处理人"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.handlerNickName">{{
            scope.row.handlerNickName
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="handTime"
        label="处理时间"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.handTime">{{ scope.row.handTime }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="是否有效" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.complainStatu === 'Y'">有效投诉</span>
          <span v-else-if="scope.row.complainStatu === 'N'">无效投诉</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="处理方式" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.processMode">{{ scope.row.processMode }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.processStatu === 'Y'">已处理</span>
          <el-button
            v-else-if="scope.row.processStatu === 'N'"
            type="text"
            @click="handleComplain(scope.row)"
          >
            处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 处理投诉弹框 -->
    <handle-dialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @handleRequest="handleRequest"
    ></handle-dialog>
    <!-- 投诉详情弹窗 -->
    <detail-dialog
      :detail-dialog-data="detailDialogData"
      v-if="detailDialogData.isShow"
    ></detail-dialog>
  </div>
</template>
<script>
import topSearch from '@component/jobComplain/topSearch' // 顶部搜索
import handleDialog from '@component/jobComplain/handleDialog' // 处理弹窗
import detailDialog from '@component/jobComplain/detailDialog' // 投诉详情弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  complainSingleRequest,
  complainMultRequest
} from '@/api/jobComplain/jobComplainAPI'
export default {
  name: 'manage',
  msg: '作业抄袭投诉管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    handleDialog,
    detailDialog
  },
  data() {
    return {
      formInline: {
        createTime: '',
        processStatu: '', // 处理状态
        complainStatu: '', // 是否有效
        dpAccount: '',
        startTime: '',
        endTime: ''
      },
      tableData: [],
      multipleSelection: '',
      total: 200,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false,
        params: ''
      },
      detailDialogData: {
        isShow: false,
        jobcompletionId: '',
        dpAccount: '',
        isDel: '',
        copyComplainId: ''
      },
      loading: false,
      id: ''
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams }
      for (let item in this.formInline) {
        if (this.formInline[item]) {
          params[item] = this.formInline[item]
        }
      }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 批量处理
    handleAll() {
      let num = this.multipleSelection.length
      if (num <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      this.multipleSelection.forEach((item) => {
        ids.push(item.copyComplainId)
      })
      this.id = ids
      this.handleDialogData.isShow = true
    },
    // 处理投诉
    handleComplain(row) {
      this.handleDialogData.isShow = true
      this.handleDialogData.params = row
      this.id = row.copyComplainId
    },
    // 选择框改变事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 是否可用被选中
    selectAble(row, index) {
      return row.processStatu === 'N'
    },
    // 显示投诉理由
    showComplainReason(row) {
      this.$alert(`${row.reason}`, '被投诉内容', {
        showConfirmButton: false
      }).catch(() => {})
    },
    // 点击查看作业
    showJobDetail(row) {
      if (row.delStatu === 'Y') {
        this.$alert('该作业已被删除', '系统提示', {
          confirmButtonText: '确定'
        })
        return false
      }
      this.detailDialogData.jobcompletionId = row.jobcompletionId
      this.detailDialogData.dpAccount = row.respondentDpAccount
      this.detailDialogData.copyComplainId = row.copyComplainId
      this.detailDialogData.isDel = row.delStatu === 'Y' ? true : false
      this.detailDialogData.isShow = true
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    handleRequest(params) {
      if (this.id instanceof Array) {
        let obj = {
          complainIds: this.id,
          ...params
        }
        complainMultRequest(
          obj,
          (response) => {
            this.$message({
              message: '处理成功',
              type: 'success'
            })
            this.handleDialogData.isShow = false
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        complainSingleRequest(
          this.id,
          params,
          (response) => {
            this.$message({
              message: '处理成功',
              type: 'success'
            })
            this.handleDialogData.isShow = false
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
    }
  }
}
</script>
<style lang="less">
#jobComplain {
  @import url('~@common/style/imgBox.less');
}
</style>
